<template>
	<view class="section" :style="{width:width + 'rpx', height: height + 'rpx'}">
		<view :class="ismoving==0 ? 'imgcontainer no_biankuang':'has_biankuang imgcontainer'"
			:style="{width:width-4 + 'rpx', height: height - 4 + 'rpx'}" v-if="originImg.path!=''" @click="want_focus">
			<image :class="'show_img'" :style="{
			      transform: 'translate(' + stv.offsetX + 'rpx, ' + stv.offsetY + 'rpx) scale(' + stv.scale + ') rotate(' + stv.rotate + 'deg)',
			      width: originImg.width + 'rpx',
			      height: originImg.height + 'rpx'
			    }" :src="originImg.path"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'myimg',
		props: {
			imgsrc: {
				type: String,
				value: ''
			},
			imgid: {
				type: String,
				value: ''
			},
			stv: {
				type: Object,
				value: {
					offsetX: 0,
					offsetY: 0,
					scale: 1,
					rotate: 0,
				}
			},
			width: {
				type: Number,
				value: 0
			},
			height: {
				type: Number,
				value: 0
			},
			isfocus: {
				type: Number,
				value: 1,
			},
			s: {
				type: Number,
				value: 1
			},
			ismoving: {
				type: Number,
				value: 0
			}
		},
		watch: {
			imgsrc: function(newval, oldval) {
				if ((newval != oldval) && (this.hasinite != 0)) {
					console.log('强制刷新');
					this.need_refresh = 1;
				}
				this.initePic(newval);
			},
			stv: function(newval, oldval) {
				if (newval == null) {
					this.properties.stv = {
						offsetX: 0,
						offsetY: 0,
						scale: 1,
						rotate: 0,
					};
				}
				if (this.hasinite == 1) {}
			},
			s: function(newval, oldval) {
				console.log('设置缩放比例' + newval);
			},
			ismoving: function(newval, oldval) {
				this.ismoving = newval
			}
		},
		data() {
			return {
				stv: {
					offsetX: 0,
					offsetY: 0,
					scale: 1,
					rotate: 0,
				},
				//图片原始宽高
				originImg: {
					width: 0,
					height: 0,
					path: ''
				},
				need_refresh: 0,
				hasinite: 0,
				fuhe: 1, //是否符合要求的像素比例
				ismoving: 0
			}
		},
		onLoad() {

		},
		methods: {
			del: function() {
				console.log('想要添加图片');
				this.$emit("add", this.properties.imgid)
			},
			want_focus: function() {
				console.log('获取焦点');
				this.$emit("focus")
			},
			want_add: function() {
				this.$emit("add", this.properties.imgid)
			},
			/**
			 * 裁边
			 */
			caibian: function() {
				console.log('裁边');
				this.stv.offsetX = 0;
				this.stv.offsetY = 0;
				this.stv.scale = 1;
				this.stv.rotate = 0;
				var res = this.originImg;
				this.stv.scale = this.properties.height / res.height;
				console.log(this.properties.height);
				if (res.width * this.stv.scale < this.properties.width) {
					console.log(this.properties.width);
					this.stv.scale = this.properties.width / res.width;
				}
				this.stv.offsetX = (res.width * this.stv.scale - res.width) / 2;
				this.stv.offsetY = (res.height * this.stv.scale - res.height) / 2;
				var event = new Object();
				event.stv = this.stv;
				event.imgid = this.properties.imgid;
				this.$emit("caibian", event)
			},
			/**
			 * 初始化图片
			 */
			initePic: function(path) {
				if (path == '') {
					console.log('图片路径为空');
					return false;
				}
				var that = this;
				this.hasinite = 1;
				uni.getImageInfo({
					src: path,
					success(res) {
						console.log('获取图片信息');
						wx.hideLoading();
						var temp_pic = new Object();
						temp_pic.url = path;
						temp_pic.res = res;
						that.originImg = res;
						//小程序，最开始不是/开头，会转换路径
						if (that.originImg.path.indexOf('pages/') != -1) {
							that.originImg.path = '/' + that.originImg.path;
						}
						that.stv = {
							offsetX: that.properties.stv.offsetX,
							offsetY: that.properties.stv.offsetY,
							scale: that.properties.stv.scale,
							rotate: that.properties.stv.rotate,
						}
						if ((that.properties.stv.offsetX == 0) && (that.properties.stv.offsetY == 0) && (that
								.properties.stv.scale == 1)) {
							that.caibian();
						} else {
							if (that.need_refresh == 1) {
								console.log('!!!!!!!!!!!!强制裁边');
								that.caibian();
								that.need_refresh = 0;
							} else //载入的作品
							{
								console.log('载入作品***********' + that.properties.s);
								var s = that.properties.s;
								that.stv.offsetX = that.stv.offsetX * s + that.originImg.width *
									(s - 1) / 2;
								that.stv.offsetY = that.stv.offsetY * s + that.originImg
									.height * (s - 1) / 2;
								that.stv.scale = that.stv.scale * s;
								var event = new Object();
								event.stv = that.stv;
								event.imgid = that.properties.imgid;
								that.$emit("caibian", event)
							}
							//that.caibian();
						}
					}
				})
			},

		}
	}
</script>

<style lang="less" scoped>
	.imgcontainer {
		position: relative;
		top: 0rpx;
		overflow: hidden;
	}

	.section {
		overflow: hidden;
	}

	.nopic {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.nopic image {
		width: 80%;
		max-width: 176rpx;
	}

	.show_img {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
		display: block;
	}

	.muban {
		position: absolute;
		top: 0rpx;
		left: 0rpx;
	}

	.imgcontaineryuan {
		border-radius: 50%;
		overflow: hidden;
	}

	.ctrcontainer {
		width: 223rpx;
		height: 76rpx;
		padding-left: 38rpx;
		padding-right: 38rpx;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 38rpx;
		position: relative;
		top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		z-index: 100;
	}

	.ctrcontainer image {
		width: 37rpx;
		height: 76rpx;
	}

	.btn_close {
		width: 48rpx;
		height: 48rpx;
		position: absolute;
		bottom: -24rpx;
		right: -24rpx;
		z-index: 100;
	}

	.fuhe_view {
		position: absolute;
		left: 0rpx;
		top: -25rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.fuhe {
		width: 130rpx;
		height: 25rpx;
		line-height: 25rpx;
		z-index: 100;
		position: absolute;
		font-size: 18rpx;
		top: -25rpx;
		color: #333333;
		background-color: #FFDD02;
		text-align: center;
		border-radius: 8rpx;
	}

	.no_biankuang {
		border: 2rpx dashed rgba(0, 0, 0, 0);
	}

	.has_biankuang {
		border: 2rpx dashed #dddddd;
	}

	.add_pic {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		border: 2rpx #dddddd dashed;
		/* border: 2rpx rgba(0, 0, 0, 0) dashed; */
		position: relative;
	}

	.add_pic image {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 30rpx;
	}

	.add_pic view {
		font-size: 33rpx;
		color: #666666;
	}
</style>